<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Panel slider example</title>
  <style type="text/css">
    body { font-family: Arial; background: #eee; }
    h1, h2 { margin-top: 0; }
    p { color: #ccc; line-height: 1.5; }
    #page { width: 940px; height: 400px; padding: 20px; margin: 0 auto; background: white; }

    .panel {
      display: none;
      width: 220px;
      padding: 20px;
      background-color: #333;
      color: #fff;
      box-shadow: inset 0 0 5px 5px #222;
    }
  </style>
</head>
<body>
  <!-- Centered page -->
  <div id="page">
    <h1>Panel slider example</h1>
    <a id="left-panel-link" href="#left-panel">Open left panel</a> |
    <a id="right-panel-link" href="#right-panel">Open right panel</a>
    <hr />
    <p>Usage instructions and source code <a href="https://github.com/eduardomb/jquery-panelslider">here</a></p>
  </div>

  <!-- Left panel -->
  <div id="left-panel" class="panel">
    <h2>Left panel</h2>
    <p>Click anywhere outside panel to close it.</p>
  </div>

  <!-- Right panel -->
  <div id="right-panel" class="panel">
    <h2>Right panel</h2>
    <p>Clicking outside this panel wont close it because <code>clickClose = false</code></p>
    <button id="close-panel-bt">Close</button>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.panelslider.min.js"></script>
  <script>
    $('#left-panel-link').panelslider();
    $('#right-panel-link').panelslider({side: 'right', clickClose: false, duration: 200 });

    $('#close-panel-bt').click(function() {
      $.panelslider.close();
    });
  </script>
</body>
</html>
